<template>
  <CardLayout title="边坡形变统计" class="slope-deformation" bg="2">
    <template #extra>
      <el-button type="primary" size="small" @click="$emit('closeSlope',4)"><el-icon><SwitchButton /></el-icon>&nbsp; 关闭</el-button>
    </template>

    <div class="content-container">
      <!-- 图表区域 -->
      <div class="charts-container">
        <div class="chart-title">形变面积统计</div>
        <div class="chart-box">
          <div ref="barChartRef" class="chart"></div>
        </div>
      </div>

      <!-- 形变分析报告 -->
      <div class="data-container">
        <div class="data-title">形变分析报告</div>
        <el-table :data="reportData.slice((reportCurrentPage - 1) * 5, reportCurrentPage * 5)" :header-cell-style="headerCellStyle" style="width: 100%" border>
            <el-table-column prop="reportName" label="报告名称" width="170" align="center"></el-table-column>
            <el-table-column prop="generateDate" label="生成日期" width="100" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template #default>
                <el-button type="primary" size="small" >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 报告分页 -->
          <div class="pagination">
            <el-pagination
              background
              layout="pager"
              :total="reportData.length"
              :page-size="5"
              v-model:current-page="reportCurrentPage"
            ></el-pagination>
          </div>
      </div>
    </div>
  </CardLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Close } from '@element-plus/icons-vue';
import useChart from '@/hooks/useCharts';
import CardLayout from '@/layouts/CardLayout.vue';

// 分页
const reportCurrentPage = ref(1);

// 图表引用
const barChartRef = ref(null);

// 使用 hooks 初始化图表
const { chartInstance: barChart } = useChart(barChartRef);

// 报告数据
const reportData = ref([
  { reportName: '2025年1月形变报告', generateDate: '2025-1-1' },
  { reportName: '2025年2月形变报告', generateDate: '2025-2-1' },
  { reportName: '2025年3月形变报告', generateDate: '2025-3-1' },
  { reportName: '2025年4月形变报告', generateDate: '2025-4-1' },
  { reportName: '2025年5月形变报告', generateDate: '2025-5-1' },
  { reportName: '2025年6月形变报告', generateDate: '2025-6-1' },
  { reportName: '2025年7月形变报告', generateDate: '2025-7-1' },
  { reportName: '2025年8月形变报告', generateDate: '2025-8-1' },
  { reportName: '2025年9月形变报告', generateDate: '2025-9-1' },
  { reportName: '2025年10月形变报告', generateDate: '2025-10-1' },
  { reportName: '2025年11月形变报告', generateDate: '2025-11-1' },
  { reportName: '2025年12月形变报告', generateDate: '2025-12-1' }
]);


// 表格头部样式
const headerCellStyle = {
  background: 'rgba(13, 36, 33, 0.6)',
  color: '#fff',
  fontWeight: 'bold'
};

// 初始化柱状图
const initBarChart = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['明显沉降', '严重形变', '一般形变', '轻微形变'],
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          color: '#fff'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '形变面积(㎡)',
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          color: '#fff'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '形变面积',
        type: 'bar',
        barWidth: '60%',
        itemStyle: {
          color: function(params) {
            // 根据不同类型设置不同颜色
            const colors = {
              0: '#5470c6', // 明显沉降
              1: '#f8b551', // 严重形变
              2: '#91cc75', // 一般形变
              3: '#73c0de'  // 轻微形变
            };
            return colors[params.dataIndex];
          }
        },
        label: {
          show: true,
          position: 'top',
          color: '#fff'
        },
        data: [100, 250, 180, 100]
      }
    ]
  };

  barChart.value.setOption(option);
};

// 页面切换函数
const handleReportPageChange = (page) => {
  reportCurrentPage.value = page;
};

onMounted(() => {
  // 初始化图表
  initBarChart();
});
</script>

<style lang="scss" scoped>
.slope-deformation {
  width: 100%;
  height: 100%;
  
  .content-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 5px;
    
    .charts-container {
      height: 40%;
      background-color: rgba(13, 36, 33, 0.6);
      border-radius: 4px;
      
      .chart-title {
        // height: 40px;
        // line-height: 40px;
        padding-left: 10px;
        font-size: 18px;
        color: #fff;
        text-align: center;
        font-family: PangMen;
      }
      .chart-box {
        height: calc(100% - 40px);
        .chart {
          width: 100%;
          height: 100%;
        }
      }
    }
    .data-container {
      flex: 1;
      background-color: rgba(13, 36, 33, 0.6);
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .data-title {
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        font-size: 18px;
        color: #fff;
        text-align: center;
        font-family: PangMen;
      }
      .el-table {
        flex: 1;
        --el-table-border-color: rgba(255, 255, 255, 0.1);
        --el-table-bg-color: transparent;
        --el-table-tr-bg-color: transparent;
        --el-table-header-bg-color: rgba(13, 36, 33, 0.6);
        --el-table-header-text-color: #fff;
        --el-table-text-color: #fff;
        
        .el-button--primary {
          --el-button-bg-color: #409eff;
          --el-button-border-color: #409eff;
          --el-button-hover-bg-color: #66b1ff;
          --el-button-hover-border-color: #66b1ff;
        }
      }
      
      .pagination {
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        
        .el-pagination {
          --el-pagination-bg-color: transparent;
          --el-pagination-text-color: #fff;
          --el-pagination-button-color: #fff;
          --el-pagination-button-bg-color: transparent;
          --el-pagination-button-disabled-color: #606266;
          --el-pagination-button-disabled-bg-color: transparent;
          --el-pagination-hover-color: #409eff;
        }
      }
    }
  }
}

// 覆盖 Element Plus 样式
:deep(.el-table) {
  background-color: transparent;
  color: #fff;
  
  .el-table__row {
    background-color: rgba(13, 36, 33, 0.4);
    
    &:hover > td {
      background-color: rgba(13, 36, 33, 0.6) !important;
    }
  }
  
  .el-table__row:nth-child(2n) {
    background-color: rgba(13, 36, 33, 0.2);
  }
  
  td, th {
    border-color: rgba(255, 255, 255, 0.1);
  }
}

:deep(.el-pagination) {
  --el-pagination-bg-color: transparent;
  --el-pagination-text-color: #fff;
  --el-pagination-button-color: #fff;
  --el-pagination-button-bg-color: transparent;
  --el-pagination-button-disabled-color: #606266;
  --el-pagination-button-disabled-bg-color: transparent;
  --el-pagination-hover-color: #409eff;
}

:deep(.el-button--primary) {
  &:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
  }
}

</style>
